import PropTypes from "prop-types";
import React, { Component } from "react";
import PubSub from "pubsub-js";

import "./index.css";

export default class List extends Component {
  //static propTypes = {second: third}
  state = {
    users: [],
    err: '',
    isFirst: true,
    isLoading: false
  }

  componentDidMount(){
    this.token = PubSub.subscribe('changeState', (msg, state)=>{
      this.setState(state)
    })
  }

  componentWillUnmount(){
    PubSub.unsubscribe(this.token)
  }

  render() {
    const {users, isFirst, isLoading, err} = this.state

    return (
      <main className="main">
        {
          isFirst ? <h2>输入关键词,点击搜索</h2> :
          isLoading ? <h2>Loading...</h2> :
          err ? <h2 style={{color:'red'}}>{err}</h2> :
          users.map((user) => {
          return (
            <figure className="item" key={user.id}>
              <a href={user.html_url} target="_blank" rel="noreferrer">
                <img src={user.avatar_url} alt="avatar" />
              </a>
              <figcaption>{user.login}</figcaption>
            </figure>
          );
        })}
      </main>
    );
  }
}
